<template>
    <div :class="[bgColor=='#fff'?'':'custom_dialog_box']">
        <el-dialog  :visible="dialogVisible"  @close="close" class="custom_dialog" v-bind="$attrs" v-on="$listeners">
            <div class="dialog_title" slot="title">
                {{title}}
            </div>
           <span><slot></slot></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="close" plain>取 消</el-button>
                <el-button type="primary" @click="submitForm" :class="[bgColor=='#fff'?'':'dialog-btn']" >确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props:{
        title:{
            type:String,
            default:''
        },
        bgColor:{
            type:String,
            default:'#fff'
        },
        dialogVisible:{
            type:Boolean,
            default:false
        },
        mark:{
            type:String,
            default(){
                return "add"
            }
        },
        form:{
            type:Object,
            default(){
                return {}
            }
        },

    },
    watch:{
        'mark'(newv,oldv){
            if(newv == 'eidt'){

            }
        },
        // 'bgColor'(newv,oldv){
        //     if(newv){
        //         console.log(this.$el,"$el....")
        //         this.$el.style.setProperty('--bgColor',newv)
        //     }
        // }
    },
    data() {
        return {
            loading:false,
        }
    },
    mounted(){
        this.$nextTick(()=>{
            this.$el.style.setProperty('--bgColor',this.bgColor)
        })
    },
    computed:{
        // title(){
        //     return this.mark == 'add'?'新增':'编辑'
        // }
    },
    methods: {
        submitForm(){
          this.$emit('submitForm')
        },
        close(){
            this.$emit('update:dialogVisible',false)
        }
    }
}
</script>

<style scoped lang="scss">
.custom_dialog_box :deep(.el-dialog__header) {
    background-color:var(--bgColor);
    box-shadow: 0px 3px 6px 1px rgba(0,0,0,0.16);
    border-radius: 0px 0px 0px 0px;

    & i{
        color: #fff;
    }


}

.custom_dialog_box{
    & .dialog_title{
        color:#fff;
        font-size: 16px;
    }
    & .dialog-btn{
        background-color:var(--bgColor);
        border: 1px solid var(--bgColor);
    }
}


</style>
